// 基于准备好的dom，初始化echarts实例      图表一
var myChart = echarts.init(document.getElementById('main1'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '年度月份报名量'
    },
    tooltip: {},
    legend: {
        data: ['']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]
    },
    yAxis: {},
    series: [{
        name: '报名量',
        type: 'bar',
        data: [15, 20, 36, 15, 15, 20, 40, 56]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 基于准备好的dom，初始化echarts实例   图表二
var myChart = echarts.init(document.getElementById('main2'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '年度月份咨询量'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '咨询量',
        data: [20, 30, 40, 20, 30, 40, 60,60],
        type: 'line'
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 基于准备好的dom，初始化echarts实例   图表三
var myChart = echarts.init(document.getElementById('main3'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '年度月份退费量'
    },
    tooltip: {},
    legend: {
        data: ['']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]
    },
    yAxis: {},
    series: [{
        name: '退费量',
        type: 'bar',
        data: [5, 10, 5, 10, 15, 10, 20, 4]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

$("#sjgl span:eq(0)").click(function(){
    $('#main1').css('opacity','1');
    $('#main1').css('z-index','100');
    $('#main2').css('z-index','0');
    $('#main3').css('z-index','0');
    $('#main2').css('opacity','0');
    $('#main3').css('opacity','0');
    $("#sjgl span").removeClass('span1');
    $(this).addClass('span1');
});
$("#sjgl span:eq(1)").click(function(){
    $('#main1').css('opacity','0');
    $('#main2').css('opacity','1');
    $('#main1').css('z-index','0');
    $('#main2').css('z-index','100');
    $('#main3').css('z-index','0');
    $('#main3').css('opacity','0');
    $("#sjgl span").removeClass('span1');
    $(this).addClass('span1');
});
$("#sjgl span:eq(2)").click(function(){
    $('#main1').css('opacity','0');
    $('#main2').css('opacity','0');
    $('#main3').css('opacity','1');
    $('#main1').css('z-index','0');
    $('#main2').css('z-index','0');
    $('#main3').css('z-index','100');
    $("#sjgl span").removeClass('span1');
    $(this).addClass('span1');
});

// 动态获取表格数据
